<template>
    <div class="hello">
        <div id="map" class="map" tabindex="0">
        </div>
    </div>
</template>
<script>
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import 'ol/ol.css';
import {FullScreen, MousePosition, ScaleLine, Zoom} from "ol/control";
import {format as formatExtent} from 'ol/coordinate';
// eslint-disable-next-line no-unused-vars
import axios from "axios";

export default {
    name: 'About',
    data() {
        return {
            lon: 0.01,
            date: '',
            map: '',
        }
    },
    methods: {
        init(that) {
            let source = new XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            })
            //   根据数据源创建图层
            var AMapLayer = new TileLayer({
                source: source
            });

            // 创建比例尺控件
            const scaleLineControl = new ScaleLine({
                className: 'ol-scale-line',
                units: 'metric', // 或者 'imperial' 对于英制单位
                target: undefined, // 默认会添加到地图的 DOM 元素中
            });

            // 创建全屏控件
            const fullScreenControl = new FullScreen({
                source: 'map' // 指定触发全屏的元素，默认为导航栏控件
            });
            //   创建缩放控件
            const zoomControl = new Zoom();
            // 创建定位控件实例
            const mousePositionControl = new MousePosition({
                coordinateFormat: function (coordinate) {
                    // eslint-disable-next-line no-undef
                    return formatExtent(coordinate, '{x}, {y}', 4);
                },
                projection: 'EPSG:4326' // 使用WGS84坐标系统
            });
            // 初始化地图
            that.map = new Map({
                layers: [AMapLayer],
                target: 'map',
                // 视图
                view: new View({
                    projection: "EPSG:4326",
                    center: [115, 39],
                    zoom: 8,
                }),
                controls: [scaleLineControl, fullScreenControl, zoomControl, mousePositionControl]
            });

            that.map.on('click', function (evt) {
                console.log('点击事件', evt);
                console.log(evt.coordinate);
                // that.zoomToCoordinate(evt.coordinate)
            });



        },
        // 添加一个函数来漫游到指定经纬度
        zoomToCoordinate(coordinate) {
            this.map.getView().setCenter(coordinate);
            // 也可以设置缩放级别，如果需要的话
            // map.getView().setZoom(desiredZoomLevel);
        },
        getPlaceNameFromCoordinates(coordinates) {
            const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${coordinates[1]}&lon=${coordinates[0]}`;

            return fetch(url)
                .then(response => response.json())
                .then(data => {
                    const placeName = data.display_name; // 假设display_name包含你需要的信息
                    return placeName;
                })
                .catch(error => {
                    console.error('获取地方名时出错:', error);
                    throw error; // 重新抛出错误以便在调用者中处理
                });
        },
        add() {
            this.lon++
        },
        demo(arr) {
            this.lon = arr[0]; // 假设你在这里改变lon值
            console.log('this.lon', this.lon)
        }
    },
    mounted() {
        this.init(this);
        console.log("main", this)
        var element = document.querySelector('.ol-full-screen-false');
        if (element) {
            element.title = '全屏切换'
        }
    }
}
</script>
<style scoped>
.map {
    width: 100%;
    height: 100vh;
    position: relative;
}
</style>
